<template>
  <div class="container">
    <div class="card">
      <div
        class="card-img"
        :style="{
          'background-image': `url(${HttpManager.attachImageUrl(
            personalInfo.avator
          )})`,
        }"
      ></div>
      <div class="card-info">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          fill="currentColor"
          class="bi bi-gender-female"
          viewBox="0 0 16 16"
        >
          <path
            fill-rule="evenodd"
            d="M8 1a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM3 5a5 5 0 1 1 5.5 4.975V12h2a.5.5 0 0 1 0 1h-2v2.5a.5.5 0 0 1-1 0V13h-2a.5.5 0 0 1 0-1h2V9.975A5 5 0 0 1 3 5z"
          />
        </svg>
        <p class="text-body">{{ personalInfo.birth }}</p>
        <p class="text-body">{{ personalInfo.introduction }}</p>
        <p class="text-title">{{ personalInfo.location }}</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  nextTick,
  computed,
  reactive,
  onBeforeMount,
  onMounted,
} from "vue";
import { useStore } from "vuex";
import { HttpManager } from "@/api";
import { formatDate } from "@/utils";

export default defineComponent({
  setup() {
    const store = useStore();
    const personalInfo = reactive({
      username: "",
      userSex: "",
      birth: "",
      location: "",
      introduction: "",
      avator: "",
    });
    const userId = computed(() => store.getters.userId);

    async function getUserInfo(id) {
      const result = (await HttpManager.getUserOfId(id)) as ResponseBody;
      personalInfo.username = result.data[0].username;
      personalInfo.userSex = result.data[0].sex;
      personalInfo.birth = result.data[0].birth;
      personalInfo.introduction = result.data[0].introduction;
      personalInfo.location = result.data[0].location;
      personalInfo.avator = result.data[0].avator;
      console.log(personalInfo);
    }

    onMounted(async () => {
      await getUserInfo(userId.value);
    });

    return {
      personalInfo,
      HttpManager,
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/css/identification.scss";
</style>
